<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/列表页界面.css">
    <title>Document</title>
</head>

<body>
    <!-- 头部head部分 -->
    <header>

    </header>
    <!---- 会员登入 ---->
    <div id="site_path" class="container">
        <nav class="nav2">
            <span class="glyphicon glyphicon-home"></span>
            <span>></span>
            <span>預訂商品</span>
        </nav>
    </div>
    <hr size="1" color="#E2E2E2" style="margin: 0;">
    <!-- 标题提醒部分 -->
    <div class="container">
        <div id="ckeditor">
            <h1>注意事項:</h1>
            <h2>1. 預定商品無法使用「貨到付款」，請訂購後付清貨款才能完成預定</h2>
            <h2>2. 完成預定後，貨物將自美國原廠進口，貨到時間約1個半月至2個月，若您無法接受，請勿下單。</h2>
            <p>&nbsp;</p>
            <h2>●備註</h2>
            <h2>Demeter 為客製手工香水, 預購區域商品為指台灣暫時無此庫存，預購完成後需自美國紐約生產並進口臺灣報關，若您無法接受預付條件及到貨時間，請勿下單。 </h2>
        </div>
    </div>
    <div class="container">
        <!----- 旁侧列表 ----->
        <div class="pangcelist">
            <ul id="collection_menu_shelf_top">
                <!-- <li class="collection_menu_shelf_second_1 collection1">
                    ★★聖誕新年趴踢★★
                    <span class="glyphicon glyphicon-chevron-down"></span>
                    
                    <ol class=".collapse_collection_menu_1_1">
                        ★交換禮物區
                        <span class="glyphicon glyphicon-chevron-down"></span>
                        <li id="ol_li">
                            <a id="ol_a">♦ 5ml香水任選5支$550</a>
                        </li>
                        <li id="ol_li">
                            <a id="ol_a">♦15ml香水及60ml擴香 ♦任選第二件半價</a>
                        </li>
                    </ol>
                    <ol class=".collapse_collection_menu_1_1">
                        ★專屬禮物區
                        <span class="glyphicon glyphicon-chevron-down"></span>
                        <li id="ol_li">
                            <a id="ol_a">♦30ml香水任選2件7折</a>
                        </li>
                        <li id="ol_li">
                            <a id="ol_a"> ♦120ml擴香任選2件7折</a>
                        </li>
                    </ol>
                </li>
                <li class="collection_menu_shelf_second_2">
                    <a> ❤新品介紹</a>
                </li>
                <li class="collection_menu_shelf_second_3 collection1">
                    ❤香水
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </li>
                <li class="collection_menu_shelf_second_4 collection1">
                    ❤空間香氛
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </li>
                <li class="collection_menu_shelf_second_2">
                    <a>❤周邊小物</a>
                </li>
                <li class="collection_menu_shelf_second_2">
                    <a>❤預訂商品</a>
                </li>
                <li class="collection_menu_shelf_second_2">
                    <a> ❤關於我們</a>
                </li>
                <li class="collection_menu_shelf_second_2">
                    <a> ❤連絡我們</a>
                </li>
                <li class="collection_menu_shelf_second_9 collection1">
                    ❤購買試聞
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </li> -->
            </ul>
            <script type="text/html" id="listTabsTemplate">
                {{each categories item}}
                <li class="collection_menu_shelf_second_2">
                    <a>{{item.title}}</a>
                </li>
                {{/each}}
            </script>
        </div>
        <!----- 商品 ----->
        <div class="gouwuche">
            <!-- 預訂商品 -->
            <div class="section-heading">
                預訂商品
                <button class="glyphicon glyphicon-th-list"></button>
                <!-- <a href="/html/购物车界面.html"></a> -->
                    <button class="glyphicon glyphicon-th-large"> </button>
                <!-- </a> -->
                <p>共 16 件商品</p>
            </div>
            <!-- 商品列表 -->
            <div class="products_content">

            </div>
            <script type="text/html" id="prodListTemplate">
                {{each list item}}
                <div id="products_box1">
                    <div class="product_image">
                        <a href="/html/详情页.html?prodId={{item.id}}">
                            <img src="{{item.image}}" height="250" width="250">
                        </a>
                        <!-- 鼠标悬停时的两个按钮 -->
                        <!-- <div class="product_link">
                            <a class="glyphicon glyphicon-search"></a>
                            <span class="text_sp1">查看商品</span>
                            <button class="glyphicon glyphicon-shopping-cart"></button>
                            <span class="text_sp2">加入購物車</span>
                        </div> -->
                    </div>
                    <div class="product_title">
                        {{item.title}}
                    </div>
                    <div class="product_price">
                        <span class="price">￥{{item.price}}</span>/
                        <del>{{item.saleNum}}￥</del>
                    </div>
                </div>
                {{/each}}
            </script>
        </div>
    </div>

    <!-- 底部 -->
    <footer>

    </footer>

    <script src="/lib/require/require.js" data-main="/js/list"></script>



    <!--    bootstrap    -->
    <!-- <script src="../lib/jquery.js"></script> -->
    <!-- <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script> -->
    <!-- jquery -->
    <!-- <script src="../lib/jquery.js"></script> -->

    <!--   头部吸顶效果   -->
    <!-- <script>
        var nav = document.querySelector('.nav')
        console.log(nav)
        window.onscroll = function () {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop >= 15) {
                // console.log(123)
                nav.className = 'nav fx'
            } else {
                nav.className = 'nav'
            }
        }
    </script> -->

    <!-- <script>
        // 一级菜单
        $("#collection_menu_shelf_top>.collection1").click(function () {
            $(this).find('ol').slideToggle(500)
        })
        // 二级菜单
        $(".collection1>.collapse_collection_menu_1_1").click(function () {
            $(this).find('ol_li').slideToggle(500)
        })
    </script> -->

    <!-- 鼠标悬停时的两个按钮 -->
    <!-- <script>
        var images = document.querySelectorAll('.product_image')
        // console.log(images[0])
        var link2 = document.querySelectorAll('.product_link')
        // console.log(link2[0])
        var producta = document.querySelectorAll('.product_link>a')
        // console.log(producta[0])
        var productbtn = document.querySelectorAll('.product_link>button')
        var sp1 = document.querySelectorAll('.text_sp1')
        // console.log(sp1)
        var sp2 = document.querySelectorAll('.text_sp2')
        for (let i = 0; i < images.length; i++) {
            // 显示大框
            // images[i].onmouseover = function () {
            //     link2[i].style.display = 'block'
            // }
            // images[i].onmouseout = function () {
            //     link2[i].style.display = 'none'
            // }
            // 显示搜索文字
            // producta[i].onmouseover = function () {
            //     sp1[i].style.display = 'block'
            // }
            // producta[i].onmouseout = function () {
            //     sp1[i].style.display = 'none'
            // }
            // 显示购物车文字
        //     productbtn[i].onmouseover = function () {
        //         sp2[i].style.display = 'block'
        //     }
        //     productbtn[i].onmouseout = function () {
        //         sp2[i].style.display = 'none'
        //     }
        // }

    </script> -->

</body>

</html>